<template lang="html">
  <div class="order-logistics">
    <h3>物流跟踪</h3>
    <div class="order-logistics-box" v-for='(item,index) in listdata'>
      <div class="order-logistics-item">
        <span class="order-arror"></span>
        <div class="order-logistics-text">
          <p>{{ item.status }}</p>
          <p>{{ item.finshTime }}</p>
        </div>
      </div>
    </div>
    <div class="order-ok">
      <button type="button" name="button" >退出</button>
    </div>
  </div>
</template>

<script>
export default {
  name:'OrderLogistics',
  data(){
    return{
      listdata:[
        {
          status:'您的订单已完成',
          finshTime:'2016-09-16 12:00'
        },
        {
          status:'您的订单已完成',
          finshTime:'2016-09-16 12:00'
        },
        {
          status:'您的订单已完成',
          finshTime:'2016-09-16 12:00'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.order-logistics{
  h3{
    font-weight: 400;
    padding-bottom: 0.2rem;
    background-color: #f1f1f1;
  }
  .order-logistics-box{
    background-color: #fff;
    .order-logistics-item{
      width: 95%;
      height: 1.25rem;
      margin: 0 auto;
      overflow: hidden;
      border-bottom: 0.01rem solid #cacaca;
      .order-arror{
        float: left;
        margin: 0.5rem;
        display: inline-block;
        width: 0.25rem;
        height: 0.25rem;
        background-color: #535353;
        border-radius: 50%;
      }
      .order-logistics-text{
        float: left;
        color: #757575;
        margin-top: 0.25rem;
      }
    }
  }
  .order-ok{
    width: 100%;
    padding-top: 0.55rem;
    text-align: center;
    button{
      font-size: 0.3rem;
      color: #fff;
      width: 5.11rem;
      height: 0.75rem;
      border: 0.02rem solid #44bf91;
      background-color: #44bf91;
      border-radius: 0.1rem;
      outline: none;
    }
  }
}
</style>
